'use client';

import React from 'react';
import { Card, Row, Col, Typography, Tag, Space } from 'antd';
import { RocketOutlined, FileImageOutlined, BulbOutlined, StarOutlined } from '@ant-design/icons';

import PromptGeneratorExample from '@/components/PromptGeneratorExample';
import styles from './TestPromptGenerator.module.scss';

const { Title, Paragraph, Text } = Typography;

/**
 * PromptGenerator 组件测试页面
 * 采用与文生图页面相同的主题和样式设计
 */
const TestPromptGeneratorPage: React.FC = () => {
  return (
    <div className={styles.container}>
        {/* 页面头部介绍 */}
        <div className={styles.pageHeader}>
          <div className={styles.headerContent}>
            <div className={styles.titleSection}>
              <Title level={2} className={styles.pageTitle}>
                <RocketOutlined className={styles.titleIcon} />
                AI 提示词生成器测试
              </Title>
              <Paragraph className={styles.pageDescription}>
                基于先进的 AI 模型，智能生成高质量的 Stable Diffusion 提示词，
                为您的创意项目提供专业的文本描述支持。
              </Paragraph>
            </div>
            <div className={styles.featureTags}>
              <Tag icon={<BulbOutlined />} className={styles.featureTag}>智能生成</Tag>
              <Tag icon={<FileImageOutlined />} className={styles.featureTag}>SD 专用</Tag>
              <Tag icon={<StarOutlined />} className={styles.featureTag}>高质量</Tag>
            </div>
          </div>
        </div>

        {/* 功能特性卡片 */}
        <Row gutter={[24, 24]} className={styles.featuresSection}>
          <Col xs={24} sm={12} lg={8}>
            <Card className={styles.featureCard}>
              <div className={styles.featureIcon}>
                <RocketOutlined />
              </div>
              <Title level={4} className={styles.featureTitle}>AI 驱动</Title>
              <Text className={styles.featureDesc}>
                采用先进的大语言模型，理解您的创意需求，生成专业的提示词
              </Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={8}>
            <Card className={styles.featureCard}>
              <div className={styles.featureIcon}>
                <FileImageOutlined />
              </div>
              <Title level={4} className={styles.featureTitle}>SD 优化</Title>
              <Text className={styles.featureDesc}>
                专为 Stable Diffusion 优化，生成的提示词更符合模型特性
              </Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={8}>
            <Card className={styles.featureCard}>
              <div className={styles.featureIcon}>
                <BulbOutlined />
              </div>
              <Title level={4} className={styles.featureTitle}>智能建议</Title>
              <Text className={styles.featureDesc}>
                提供正面和负面提示词建议，帮助您获得更好的生成效果
              </Text>
            </Card>
          </Col>
        </Row>

        {/* 主要测试区域 */}
        <div className={styles.testSection}>
          <Card 
            title={
              <Space>
                <FileImageOutlined />
                <span>提示词生成测试</span>
              </Space>
            }
            className={styles.testCard}
          >
            <PromptGeneratorExample />
          </Card>
        </div>

        {/* 使用说明 */}
        <div className={styles.instructionsSection}>
          <Card 
            title="使用说明" 
            className={styles.instructionsCard}
          >
            <Row gutter={[24, 16]}>
              <Col xs={24} md={12}>
                <div className={styles.instruction}>
                  <div className={styles.stepNumber}>1</div>
                  <div className={styles.stepContent}>
                    <Title level={5}>输入创意描述</Title>
                    <Text>在输入框中描述您想要生成的图像内容</Text>
                  </div>
                </div>
              </Col>
              <Col xs={24} md={12}>
                <div className={styles.instruction}>
                  <div className={styles.stepNumber}>2</div>
                  <div className={styles.stepContent}>
                    <Title level={5}>AI 智能生成</Title>
                    <Text>点击生成按钮，AI 将为您创建专业提示词</Text>
                  </div>
                </div>
              </Col>
              <Col xs={24} md={12}>
                <div className={styles.instruction}>
                  <div className={styles.stepNumber}>3</div>
                  <div className={styles.stepContent}>
                    <Title level={5}>编辑和优化</Title>
                    <Text>可以对生成的提示词进行编辑和调整</Text>
                  </div>
                </div>
              </Col>
              <Col xs={24} md={12}>
                <div className={styles.instruction}>
                  <div className={styles.stepNumber}>4</div>
                  <div className={styles.stepContent}>
                    <Title level={5}>插入使用</Title>
                    <Text>将优化后的提示词插入到您的项目中</Text>
                  </div>
                </div>
              </Col>
            </Row>
          </Card>
        </div>
      </div>
  );
};

export default TestPromptGeneratorPage;